<template>
      <div>
            <nav class="system_head navbar navbar-default">
                  <div class="col-xs-6" style="padding-left:0px;">
                        <!-- <a class="navbar-brand" href="#" style="letter-spacing: 2px;color:#777;padding-left:0px;text-shadow:1px 1px 5px rgba(0,0,0,.5)">{{pageName}}</a> -->
                        <a class="navbar-brand" href="#" style="letter-spacing: 2px;color:#777;padding-left:0px;text-shadow:1px 1px 5px rgba(0,0,0,.5)">{{$sysName}}</a>
                  </div>
                  <div class="col-xs-6 navbar-default" style="padding-right:0px;@media">
                        <ul class="nav navbar-nav navbar-right">
                              <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                          <span class="glyphicon glyphicon-star-empty" style="color:#337ab7"></span><span style="color:#337ab7">お気に入り</span>
                                          <span class="caret" style="color:#337ab7"></span>
                                    </a>
                                    <ul class="dropdown-menu" style="max-height:400px;overflow-y:auto">
                                          <li v-for="(item,index) in collects" :key="item.id"><a href="#">
                                                <button @click="delButtonMth(index)" style="padding:0 0;border:0px;background-color: #ffffff;"><span :class="[returnChangeCollectIndex === index?'hide':'','glyphicon','glyphicon-remove']" style="margin-right:5px;vertical-align:middle" data-toggle="modal" data-target="#collectModal" ></span></button>
                                                <span :class="[returnChangeCollectIndex === index?'hide':'']" style="display:inline-block;width:100px;overflow-x:hidden;vertical-align:middle;margin-right:10px;" @click="getCollectContent(index)">{{item.favname}}</span>
                                                <button type="button" :class="[returnChangeCollectIndex === index?'hide':'','btn','btn-link']" style="padding:0px;vertical-align:middle;color:#337ab7;" @click.stop="changeCollectName(index)">名称変更</button>
                                                <input type="text" v-model="updateCollectName" :class="[returnChangeCollectIndex === index?'':'hide']" style="width:120px;">
                                                <button type="button" :class="[returnChangeCollectIndex === index?'':'hide','btn','btn-link']" style="padding:0px;vertical-align:middle;margin-right:5px;margin-left:5px;color:#337ab7;" @click.stop="updateCollectNameMth">保存</button>
                                                <button type="button" :class="[returnChangeCollectIndex === index?'':'hide','btn','btn-link']" style="padding:0px;vertical-align:middle;color:#337ab7;" @click.stop="cancelCollectChange()">戻る</button>
                                          </a></li>
                                    </ul>
                              </li>
                              <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                          <span class="glyphicon glyphicon-user" style="color:#337ab7"></span>
                                          <span style="color:#337ab7">{{user}}</span>
                                          <span class="caret" style="color:#337ab7"></span>
                                    </a>
                                    <ul class="dropdown-menu">
                                          <li><a href="#" @click="logout"><span class="glyphicon glyphicon-log-out" style="margin-right:10px;"></span>ログアウ</a></li>
                                    </ul>
                              </li>
                        </ul>
                  </div>
            </nav>
            <div class="modal fade" tabindex="-1" role="dialog" id="collectModal" style="text-align:left">
                  <div class="modal-dialog" role="document">
                        <div class="modal-content">
                              <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title">提示</h4>
                              </div>
                              <div class="modal-body">
                                    <p style="font-size:16px;">{{collectModalInfo}}</p>
                              </div>
                              <div class="modal-footer">
                                    <button type="button" class="btn btn-info" @click="modalSubMth()" data-dismiss="modal">確認</button>
                              </div>
                        </div>
                  </div>
            </div>
      </div>
</template>

<script>
export default {
      name:'page_head',
      data:function(){
            return {           
                  pageName:'',
                  user:global.userCd,
                  //记录修改收藏的下标
                  updateCollectIndex:'',
                  //记录修改收藏的名字
                  updateCollectName:'',
                  //记录删除收藏的下标
                  delCollectIndex:'',
                  //记录modal提醒类型
                  collectModalType:'delete',
                  //记录modal提示信息
                  collectModalInfo:'削除してもよろしいですか？',
                  //收藏
                  collects:[],
                  collectCoverFlag:0,
                  //系统名请求地址
                  getSystemNameUrl:'/suntorylink/module/CGI/HEADER_MODULE.CGI',
                  //添加收藏请求地址
                  collectionUrl:'/suntorylink/favs/system/',
                  // sysName = $
            };
      },
      computed:{
            /**
             * 获取当前正在修改的收藏下标
             */
            returnChangeCollectIndex(){
                  return this.updateCollectIndex;
            }
      },
      watch:{},
      methods:{
            delButtonMth(index){
                  this.delCollectIndex=index;
                  this.collectModalType='delete';
                  this.collectModalInfo='削除してもよろしいですか？';
                  window.$('#collectModal').modal('show');
            },
            /**
             * 显示收藏修改框
             */
            changeCollectName(index){
                  this.updateCollectIndex = index;
                  this.updateCollectName = this.collects[index].favname;
                  this.collectModalType='update';
            },
            /**
             * 隐藏收藏修改框
             */
            cancelCollectChange(){
                  this.updateCollectIndex = '';
                  this.updateCollectName = '';
            },
            /**
             * 删除一条收藏内容
             */
            delCollect(){
                  var that = this;
                  this.$http.delete('/suntorylink/favs/system/'+this.collects[this.delCollectIndex].id+'/')
                  .then(function(){
                        that.reloadCollectList();
                  });
            },
            /**
             * 修改收藏名字
             */
            updateCollectNameMth(){
                  var that = this;
                  this.$http.get('/suntorylink/favs/system/',{
                        params:{
                              usercd:that.user,
                              systemcd:global.systemCd,
                              favname:that.updateCollectName
                        }
                  }).then(function(response){
                        if(response.data.length>0){
                              window.$('#collectModal').modal('show');
                        }else{
                              that.collectSetName();
                        }
                  });
            },
            //重新设置收藏名字
            collectSetName(){
                  var that = this;
                  this.$http.put('/suntorylink/favs/system/'+this.collects[this.updateCollectIndex].id+'/',{
                        usercd:this.user,
                        systemcd:global.systemCd,
                        favname:this.updateCollectName
                  }).then(function(){
                        that.cancelCollectChange();
                        that.reloadCollectList();
                  });
            },
            /**
             * 重新请求收藏列表
             */
            reloadCollectList(){
                  var that = this;
                  this.$http.get('/suntorylink/favs/system/',{
                        params:{
                              usercd:this.user,
                              systemcd:global.systemCd
                        }
                        }).then(function(response){
                              that.collects=response.data;
                        });
            },
            /**
             * 弹窗modal确定事件
             */
            modalSubMth(){
                  this.collectCoverFlag = 1;
                  if(this.collectModalType==='delete'){
                        this.delCollect();
                  }else if(this.collectModalType === 'update'){
                        this.collectSetName();
                        this.collectCoverFlag=1;
                  }else{
                        return null;
                  }
            },
            //新增收藏{name:"",param:""}
            addCollection(collectObj){
                  this.collectModalInfo = 'お気に入り名が既に存在します。上書きしてもよろしいですか？';
                  this.checkCollection(collectObj);
            },
            //校验收藏是否重名
            checkCollection(obj){
                  var vm = this;
                  this.$http.get(vm.collectionUrl,{
                        params:{
                              systemcd: global.systemCd,
                              usercd: global.userCd,
                              favname: obj.name
                        }
                  }).then(function(response){
                        if( response.data.length > 0 ){
                              vm.collectModalType = 'add';
                              vm.collectCoverFlag = 0;
                              //有重名，提示
                              window.$('#collectModal').modal('show');
                              window.$('#collectModal').one('hidden.bs.modal', function() {
                                    if (vm.collectCoverFlag === 1) {
                                          obj.id = response.data[0].id;
                                          vm.updateCollection(obj);
                                          vm.collectCoverFlag = 0;
                                    }
                              });
                        }else{
                              //无重名，直接保存
                              vm.sendAddCollection(obj);
                        }
                  });
            },
            //新增收藏
            sendAddCollection(collectObj){
                  var vm  = this;
                  this.$http.post(vm.collectionUrl,{
                        systemcd: global.systemCd,
                        usercd: global.userCd,
                        favname: collectObj.name,
                        fav:JSON.stringify(collectObj.param)
                  }).then(function(){
                        vm.reloadCollectList();
                        global.msg_instance.showMsgNew({
                              title : 'COMMON_007'
                        });
                  });
            },
            //修改收藏内容
            updateCollection(obj){
                  var vm  = this;
                  this.$http.put(vm.collectionUrl + obj.id + '/',{
                        systemcd: global.systemCd,
                        usercd: global.userCd,
                        favname: obj.name,
                        fav:JSON.stringify(obj.param)
                  }).then(function(){
                        vm.reloadCollectList();
                        global.msg_instance.showMsgNew({
                              title : 'COMMON_007'
                        });
                  });
            },
            //获取收藏的内容
            getCollectContent(index){
                  window.$('.dropdown-toggle').dropdown();
                  var vm = this;
                  var id = this.collects[index].id;
                  this.$http.get(vm.collectionUrl + id + '/').then(function(response){
                        vm.$emit('collectClick',response.data);
                  });
                  window.$('body').click();
            },
            //退出
            logout(){
                  window.location.href = '/portal/logout';
            }
      },
      //页面渲染后执行
      mounted(){
            var that = this;
            this.$http.get('/suntorylink/favs/system/',{
                  params:{
                        usercd:this.user,
                        systemcd:global.systemCd
                  }
            }).then(function(response){
                  that.collects=response.data;
            });
            this.$http.post(this.getSystemNameUrl,{'user':this.user,'sys':global.systemCd})
                  .then(function(response){
                        that.pageName = response.data[0].sys;
                  });
      }
};
</script>
<style scoped>
      .system_head{
            background-color:#F8F8F8;
            width: 100%;
            border:1px solid #e7e7e7;
            margin-bottom:0px;
            padding:0px 15px;
      }
</style>